<template>
  <el-row v-if="report != null" style="margin-left: 15px">
    <el-descriptions :column="1">
      <el-descriptions-item label="供应商">{{ report.supplier }}</el-descriptions-item>
      <el-descriptions-item label="芯片型号">{{ report.chip_no }}</el-descriptions-item>
      <el-descriptions-item label="锐科编号">{{ report.raycus_no }}</el-descriptions-item>
      <el-descriptions-item label="测试时间">{{ report.test_time }}</el-descriptions-item>
      <el-descriptions-item label="测试内容">{{ report.test_content }}</el-descriptions-item>
      <el-descriptions-item label="COS验证报告">
        <el-link type="primary" :href="report.report_file_url" target="_blank">{{ report.report_file_url }}</el-link>
      </el-descriptions-item>
    </el-descriptions>
    <el-table
      v-loading="listLoading"
      :data="params"
      element-loading-text="Loading"
      border
      fit
      size="medium"
      :span-method="objectSpanMethod"
      :header-cell-style="headerCellStyle"
      :cell-style="firstCellStyle"
      style="margin-top: 10px"
    >
      <el-table-column label="参数类型" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.item }}
        </template>
      </el-table-column>
      <el-table-column label="参数" header-align="center" align="left">
        <template slot-scope="scope">
          {{ scope.row.parameter }}
        </template>
      </el-table-column>
      <el-table-column label="符号" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.symbol }}
        </template>
      </el-table-column>
      <el-table-column label="单位" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.unit }}
        </template>
      </el-table-column>
      <el-table-column label="测试条件" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.test_condition }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小值" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.min_value }}
        </template>
      </el-table-column>
      <el-table-column label="典型值" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.typical_value }}
        </template>
      </el-table-column>
      <el-table-column label="最大值" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.max_value }}
        </template>
      </el-table-column>
    </el-table>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import waves from '@/directive/waves'
import { fetchCOSReport } from '@/api/cos_report'

export default {
  name: 'CosReport',
  directives: { waves },
  props: ['testTime', 'id'],
  data() {
    return {
      chipId: this.$route.query.chipId,
      reportTestTime: this.testTime,
      reportId: this.id,
      report: null,
      params: [],
      listLoading: true
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData(this.chipId, this.reportId)
  },
  methods: {
    headerCellStyle({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #FAFAFA !important'
      }
    },
    firstCellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return 'background-color: #FAFAFA !important'
      }
    },
    fetchData(curChipId, curReportId) {
      this.listLoading = true
      fetchCOSReport({ chipId: curChipId, reportId: curReportId }).then(response => {
        this.report = response.data
        // window.console.log(response.data)
        this.params = this.report.params.chip_surface.concat(this.report.params.eutectic_quality)
          .concat(this.report.params.photoelectric_parameter).concat(this.report.params.reliability_test)
        this.listLoading = false
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          // 芯片外观
          return {
            rowspan: 4,
            colspan: 1
          }
        } else if (rowIndex === 4) {
          // 共晶质量
          return {
            rowspan: 3,
            colspan: 1
          }
        } else if (rowIndex === 7) {
          // 光电参数
          return {
            rowspan: 13,
            colspan: 1
          }
        } else if (rowIndex === 20) {
          // 光电参数
          return {
            rowspan: 11,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px 0px 80px 0px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-table .tableHeaderStyle {
  background-color: #1989fa !important;
  color: #fff;
}

</style>
